<template>
	<ge-page id="ge-page">
		<work v-if="active === 'work'" />
		<product v-if="active === 'product'" :activePro="activePro" />
		<order v-if="active === 'order'" :activeOrder="activeOrder" />

		<van-tabbar :active="active" fixed @change="changeTabbar" :placeholder="true"
			:active-color="tabBar.selectedColor" :inactive-color="tabBar.color">
			<view v-for="(item, index) in tabBar.list" :key="index" class="custom-tabbar-item">
				<van-tabbar-item :icon="active === item.name ? item.selectedIconPath : item.iconPath" :name="item.name">
					{{item.text}}
				</van-tabbar-item>
			</view>
		</van-tabbar>
	</ge-page>
</template>

<script>
	import work from '@/pages/work/index.vue'
	import product from '@/pages/product/index.vue'
	import order from '@/pages/order/index.vue'
	import { storageKey } from '@/constant/config';

	export default {
		components: {
			work,
			product,
			order,
		},
		data() {
			return {
				activeOrder: 0,
				activePro: 0,
				active: 'work',
				tabBar: {
					"color": "#7A7E83",
					"selectedColor": "#EE0A24",
					"borderStyle": "black",
					"backgroundColor": "#ffffff",
					"list": [{
						"pagePath": "pages/work/index",
						"iconPath": "/static/img/tabbar/icon-home.png",
						"selectedIconPath": "/static/img/tabbar/icon-home-selected.png",
						"text": "工作台",
						"name": "work"
					}, {
						"pagePath": "pages/product/index",
						"iconPath": "/static/img/tabbar/icon-goods.png",
						"selectedIconPath": "/static/img/tabbar/icon-goods-selected.png",
						"text": "商品",
						"name": "product"
					}, {
						"pagePath": "pages/order/index",
						"iconPath": "/static/img/tabbar/icon-order.png",
						"selectedIconPath": "/static/img/tabbar/icon-order-selected.png",
						"text": "订单",
						"name": "order"
					}, ]
				},
			}
		},
		created() {},
		onShow() {

		},
		onLoad(options) {
			if (options.tabbar) {
				this.active = options.tabbar
				if (options.tabbar === 'order') {
					this.activeOrder = options.active ? options.active : 0
				} else if (options.tabbar === 'product') {
					this.activePro = options.active ? options.active : 0
				}
			}
		},
		methods: {
			changeTabbar(e) {
				this.active = e.detail
				// this.activeOrder = this.activePro = 0
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .van-tabbar--fixed {
		position: fixed;
	}

	.custom-tabbar-item {
		flex: 1;
	}

	::v-deep .van-tabbar-item {
		align-items: center;
		color: var(--tabbar-item-text-color, #646566);
		display: flex;
		flex-direction: column;
		font-size: var(--tabbar-item-font-size, 12px);
		height: 100%;
		justify-content: center;
		line-height: var(--tabbar-item-line-height, 1);
	}
</style>